<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #left,#right{with:200px;padding:10px;float:left;}
        #left{background-color: red;}#right{background-color: blue;}
    </style>
</head>
<body>
<div class="wrap">
    <div id="left">
        left
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        left
    </div>
    <div id="right">
        right
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        right
    </div>
</div>
<script type="text/javascript">
   window.onload=function(){
       var oLeft = document.getElementById('left');
       var oRight = document.getElementById('right');
       var oLeftH =document.getElementById('left').offsetHeight;
       var oRightH=document.getElementById('right').offsetHeight;
       console.log(oLeftH);
       console.log(oRightH);

      if(oLeftH > oRightH){
          oRight.style.height = oLeftH + 'px';
          console.log(111);
      }else{
          oLeft.style.height = oRightH + 'px';
          console.log(222);
      }
   };
 // $(document).ready(function(){
 //     if($('#left').height()>$('#right').height()){
 //         $('#right').css('height',$('#left').height());
 //     }else{
 //         $('#left').css('height',$('#right').height());
 //     }
 // })
</script>
</body>
</html>